<template>
  <a-modal
    :visible="visible"
    :title="t('add Permissions') + '-' + title"
    :cancelText="t('cancel')"
    :okText="t('submit')"
    @ok="submit"
    wrap-class-name="full-modal"
    @cancel="cancel(false)"
    width="500px"
  >
    <div style="height: 500px">
      <a-tree
        :tree-data="treeData"
        v-model:checkedKeys="checkedAllKeys"
        v-if="treeData.length > 0"
        :defaultExpandAll="true"
        checkable
        @check="onCheck"
        :height="500"
        :fieldNames="{
          children: 'children',
          title: 'title',
          key: 'id',
          parent: 'parent',
        }"
      >
        <template #title="{ title }">
          {{ t(title) }}
        </template>
      </a-tree>
    </div>
  </a-modal>
</template>

<script>
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";

import { permissions, setPermissions } from "@/core/api/module/user";
import { tree } from "@/core/api/module/permission";

import { defineComponent, ref, watch, reactive, toRefs, onMounted } from "vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  emit: ["close"],

  setup(props, context) {
    const { t } = useI18n();

    const state = reactive({
      treeData: [],
      checkedKeys: [],
      halfCheckedKeys: [],
      checkedAllKeys: [],
      title: "",
    });

    const loadData = async (param) => {
      const tree_response = await tree({});
      state.treeData = tree_response.data;

      const permission_response = await permissions(param);

      state.title = t("username") + ":" + param.login_name;

      const dataAfter = permission_response.data.map((x) => {
        if (x.checked) {
          state.checkedKeys.push(x.permission_id);
        } else {
          state.halfCheckedKeys.push(x.permission_id);
        }
      });

      state.checkedAllKeys = {
        checked: state.checkedKeys,
        halfChecked: state.halfCheckedKeys,
      };
    };

    const closeTag = (e) => {};

    /// 初始数据
    onMounted(async () => {
      loadData(props.record);
    });

    function onCheck(checkedKeys, info) {
      state.checkedKeys = checkedKeys;
      state.halfCheckedKeys = info.halfCheckedKeys;
    }

    const cancel = (e = false) => {
      context.emit("close", e);
    };

    const submit = (e) => {
      const postdata = Object.assign(
        { id: props.record.id },
        { checkedKeys: state.checkedKeys },
        { halfCheckedKeys: state.halfCheckedKeys }
      );

      setPermissions(postdata).then((response) => {
        if (response.code == 0) {
          message
            .success({ content: t("Saved successfully!"), duration: 1 })
            .then(() => {
              cancel(true);
            });
        } else {
          message.error({ content: response.msg, duration: 1 }).then(() => {});
        }
      });
    };

    return {
      t,
      ...toRefs(state),
      cancel,
      submit,
      onCheck,
      closeTag,

      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
  },
});
</script>

<style  scoped>
.tree-transfer .ant-transfer-list:first-child {
  width: 50%;
  flex: none;
}
</style>
